<template>
  <view class="appointment-detail-page">
    <view
      class="appointment-detail"
      v-if="!loading"
    >
      <view class="appointment-detail-top">
        <text
          class="appointment-detail-top-text"
          :style="{ color: statusColor }"
          >{{ statusText }}</text
        >
        <text class="appointment-detail-top-text">{{
          appointmentDetail.createTime
        }}</text>
      </view>
      <view class="appointment-detail-card">
        <view class="appointment-detail-status">
          <u--image
            shape="circle"
            :src="statusImage"
            width="80px"
            height="80px"
          ></u--image>

          <text class="appointment-detail-status-text">{{ statusText }}</text>
        </view>
        <view class="appointment-detail-info">
          <view
            class="appointment-detail-row"
            v-for="(info, index) in infos"
            :key="index"
          >
            <text class="appointment-detail-row-text"
              >{{ info.name }} : {{ info.value }}</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { appointment } from "@/api";
  import { ERROR_TYPE, ERROR_MESSAGE } from "@/common/constants";
  import {
    getStatusColor,
    getStatusText,
    showMessage,
    hideLoading,
    showLoading,
  } from "@/common/utils";
  import _ from "lodash";
  export default {
    data() {
      return {
        /**
         * 存储预约详情数据
         * @type {Object}
         * @property {string} id 预约id
         * @property {string} userName 申请人姓名
         * @property {string} userIdCard 申请人身份证
         * @property {string} userPhone 申请人联系方式
         * @property {string} userCompany 申请人单位
         * @property {string} professorName 预约专家
         * @property {string} appointmentTime 预约时间
         * @property {string} appointmentContent 到访事项
         * @property {number} lastAuditingStatus 最后审核状态
         * @property {string} createTime 创建时间
         */
        appointmentDetail: {},
        /**
         * 存储预约详情日志列表
         * @type {Array<Object>}
         * @property {number} auditingStatus 审核状态
         */
        logList: [],
        /**
         * 是否显示加载中
         * @type {boolean}
         */
        loading: false,
      };
    },

    computed: {
      /**
       * 最后一次审核状态
       * @type {number}
       */
      lastAuditingStatus() {
        return _.last(this.logList)?.auditingStatus;
      },
      /**
       * 获取状态文本
       * @returns {string}
       */
      statusText() {
        return getStatusText(this.lastAuditingStatus);
      },
      /**
       * 获取状态颜色
       * @returns {string}
       */
      statusColor() {
        return getStatusColor(this.lastAuditingStatus);
      },
      /**
       * 获取状态图片
       * @returns {string}
       */
      statusImage() {
        switch (this.lastAuditingStatus) {
          case 1:
            return "/static/images/status1.png";
          case 2:
            return "/static/images/status2.png";
          default:
            return "/static/images/status3.png";
        }
      },
      /**
       * 获取信息列表
       * @property {string} name 信息名称
       * @property {string} value 信息值
       * @returns {Array<Object>}
       */
      infos() {
        return [
          {
            name: "申请人姓名",
            value: this.appointmentDetail.userName,
          },
          {
            name: "身份证号码",
            value: this.appointmentDetail.userIdCard,
          },
          {
            name: "联系方式",
            value: this.appointmentDetail.userPhone,
          },
          {
            name: "单位",
            value: this.appointmentDetail.userCompany,
          },
          {
            name: "预约专家",
            value: this.appointmentDetail.professorName,
          },
          {
            name: "预约时间",
            value: this.appointmentDetail.appointmentTime,
          },
          {
            name: "到访事项",
            value: this.appointmentDetail.appointmentContent,
          },
        ];
      },
    },
    async mounted() {
      this.appointmentDetail.id = this.$route.query.id;
      await this.getAppointmentDetail();
    },
    async onPullDownRefresh() {
      await this.getAppointmentDetail();
      uni.stopPullDownRefresh();
    },
    methods: {
      /**
       * 获取预约详情
       */
      async getAppointmentDetail() {
        showLoading("加载中...");
        this.loading = true;
        try {
          const res = await appointment.getAppointmentDetail({
            id: this.appointmentDetail.id,
          });
          this.appointmentDetail = res.data.appointment;
          this.logList = res.data.logList;
        } catch (error) {
          if (error.type === ERROR_TYPE.NETWORK) {
            return;
          }
          showMessage(error.msg || ERROR_MESSAGE.NETWORK_ERROR, false);
        } finally {
          hideLoading();
          this.loading = false;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }
  .appointment-detail-page {
    display: flex;
    flex-direction: column;

    .appointment-detail {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 0 auto;

      .appointment-detail-top {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin: var(--margin-mini) 0;

        .appointment-detail-top-text {
          font-size: var(--font-size-small);
        }
      }

      .appointment-detail-card {
        padding: var(--margin-base);
        overflow: hidden;
        display: flex;
        border-radius: 5px;
        background-color: white;
        flex-direction: column;

        .appointment-detail-status {
          display: flex;
          flex-direction: column;
          align-self: center;
          justify-items: center;
          margin: var(--margin-large) 0;

          .appointment-detail-status-text {
            font-size: var(--font-size-medium);
            align-self: center;
          }
        }

        .appointment-detail-info {
          display: flex;
          flex-direction: column;
          gap: var(--margin-mini);

          .appointment-detail-row {
            .appointment-detail-row-text {
              font-size: var(--font-size-base);
              color: #636363;
            }
          }
        }
      }
    }
  }
</style>
